<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
    <style>

    </style>
</head>

<body>
    <!--导航部分-->
    <nav class="nav">
        <div class="container container-nav">
            <div class="left-nav">
                <a href="#">小米商城</a><span class="sep">|</span>
                <a href="#">MIUI</a><span class="sep">|</span>
                <a href="#">米聊</a><span class="sep">|</span>
                <a href="#">游戏</a><span class="sep">|</span>
                <a href="#">多看阅读</a><span class="sep">|</span>
                <a href="#">云服务</a><span class="sep">|</span>
                <a href="#">金融</a><span class="sep">|</span>
                <a href="#">小米商城手机版</a><span class="sep">|</span>
                <a href="#">问题反馈</a><span class="sep">|</span>
                <a href="#">SelectRegion</a>
            </div>
            <div class="right-nav">
                <a href="#">登录</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
                <section class="car">
                    <div class="topcar">
                        <i class="fa fa-shopping-cart fa-lg" aria-hidden="true" id="shopping-car"></i>
                        <a href="#">购物车（0）</a>
                    </div>
                    <section class="noshopping">
                        <section class="yaborder"></section>
                        <p>购物车中还没有商品，赶紧选购吧！</p>
                    </section>
                </section>
            </div>
        </div>
    </nav>
    <!--第二部分下拉框导航-->
    <div class="container container-secondnav">
        <div class="mi-logo"><img src="./img/mi-logo.png" alt=""></div>
        <ul class="second-nav">
            <li class="topborder-first"><a href="#">小米手机</a>
            </li>
            <li><a href="#">红米</a></li>
            <li><a href="#">平板·笔记本</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">盒子·影音</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
            <div class="clear"></div>
        </ul>
        <div class="info"><a href="#" class="first-miA">电视4A 55"</a><a class="second-miB" href="#">小米Note 2特惠</a>
            <input type="text" class="inputinfo">
            <input type="button" class="inputbtn"><i class="fa fa-search fa-lg " aria-hidden="true" id="search"></i></input>
            <div class="kuang">
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
                <p>
                    <span>小米</span><span>约有7件</span>
                </p>
            </div>
        </div>
    </div>
    <ul class="topborder">
        <div class="container container-border">
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/max2_toubu.png" alt=""></a>
                <p>小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#"><img src="./img/max2_toubu.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#"><img src="./img/max2_toubu.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#"><img src="./img/max2_toubu.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#"><img src="./img/max2_toubu.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#" class="norightborder"><img src="./img/max2_toubu.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <div class="clear"></div>
        </div>
        <div class="container container-border">
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32016.jpg" alt=""></a>
                <p>小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#"><img src="./img/32016.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#"><img src="./img/32016.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#" class="norightborder"><img src="./img/32016.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <div class="clear"></div>
        </div>
        <div class="container container-border">
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32017.jpg" alt=""></a>
                <p>小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32017.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#">
                    <img src="./img/32017.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#" class="norightborder"><img src="./img/32017.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <div class="clear"></div>
        </div>
        <div class="container container-border">
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32018.png" alt=""></a>
                <p>小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32018.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32018.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#" class="norightborder">
                    <img src="./img/32018.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <div class="clear"></div>
        </div>
        <div class="container container-border">
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32019.jpg" alt=""></a>
                <p>小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32019.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#">
                    <img src="./img/32019.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#" class="norightborder">
                    <img src="./img/32019.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <div class="clear"></div>
        </div>
        <div class="container container-border">
            <li>
                <p class="yellowborder">现货</p>
                <a href="#">
                    <img src="./img/32020.png" alt=""></a>
                <p>小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32020.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32020.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32020.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#" class="norightborder"><img src="./img/32020.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">现货</p>
                <a href="#" class="norightborder">
                    <img src="./img/32020.png" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <div class="clear"></div>
        </div>
        <div class="container container-border">
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32022.jpg" alt=""></a>
                <p>小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="transparentborder">&nbsp;&nbsp;</p>
                <a href="#"><img src="./img/32022.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <li>
                <p class="yellowborder">降价</p>
                <a href="#" class="norightborder">
                    <img src="./img/32022.jpg" alt=""></a>
                <p class="mibottom">小米</p>
                <p class="yellow">2499元起</p>
            </li>
            <div class="clear"></div>
        </div>
    </ul>

    <!--轮播图-->
    <div class="container container-lunbo">
        <ul class="lunbo">
            <li class='current'>
                <a href="#"><img src="./img/lun_1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/lun_3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/lun_4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/lun_5.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/lun_6.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/lun_7.jpg" alt=""></a>
            </li>
        </ul>
        <div class="light">
            <span class="green"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
        <ul class="lunbokuang">
            <li>手机 电话卡<span>&gt;</span></li>
            <li>笔记本 平板<span>&gt;</span></li>
            <li>电视 盒子<span>&gt;</span></li>
            <li>路由器 智能硬件<span>&gt;</span></li>
            <li>移动电源 电池 插线板<span>&gt;</span></li>
            <li>耳机 音响 <span>&gt;</span></li>
             <li>保护套 贴膜 <span>&gt;</span></li>
            <li>线材 支架 存储卡<span>&gt;</span></li>
            <li>箱包 服饰 谢 眼镜<span>&gt;</span></li>
            <li>咪兔 生活周边<span>&gt;</span></li>
        </ul>
        <div class="nearlunbo">
            <ul class="first-nearlunbo">
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                  <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <div class="clear"></div>
            </ul>
            <ul class="second-nearlunbo">
                 <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                 <div class="clear"></div>
            </ul>
            <ul class="third-nearlunbo">
                 <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <div class="clear"></div>
            </ul>
            <ul class="fouth-nearlunbo">
                 <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <div class="clear"></div>
            </ul>
            <ul class="fifth-nearlunbo">
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                  <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <div class="clear"></div>
            </ul>
            <ul class="sixth-nearlunbo">
                  <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                  <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <div class="clear"></div> 
            </ul>
            <ul class="seventh-nearlunbo">
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <div class="clear"></div>
            </ul>
            <ul class="eigth-nearlunbo">
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                 <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <div class="clear"></div>
            </ul>
            <ul class="ninth-nearlunbo">
                 <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                  <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                <span class="right">选购</span></li>
                 <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
                <div class="clear"></div> 
            </ul>
            <ul class="tenth-nearlunbo">
                 <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                 <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                  <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li> 
                 <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/xm6_80.png" alt=""><span class="center">小米6</span>
                <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                  <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span>
                 <span class="right">选购</span></li>
                <li><img src="./img/80pc-5x.png" alt=""><span class="center">小米5X</span> 
                 <span class="right">选购</span></li>
            </ul>
        </div>
        
    </div>
    <!--插入三张图-->
    <div class="container container-picture">
        <table border="1">
          <tr>
              <td><i id="suo" class="fa fa-trash-o lg" aria-hidden="true"></i><p>企业团购</p></td>
              <td><i id="suo" class="fa fa-trash-o lg" aria-hidden="true"></i><p>企业团购</p></td>
              <td><i id="suo" class="fa fa-trash-o lg" aria-hidden="true"></i><p>企业团购</p></td>
          </tr>
          <tr>
              <td><i id="suo" class="fa fa-trash-o lg" aria-hidden="true"></i><p>企业团购</p></td>
              <td><i id="suo" class="fa fa-trash-o lg" aria-hidden="true"></i><p>企业团购</p></td>
              <td><i id="suo" class="fa fa-trash-o lg" aria-hidden="true"></i><p>企业团购</p></td>
          </tr>
        </table>
        <div class="threepicture">
            <img src="./img/lunxia.jpg" alt="">
        <img src="./img/lunxia2.jpg" alt="">
        <img src="./img/lunxia3.jpg" alt="">
        </div>
    </div>
    <!--小米单星品-->
    <div class="container container-more">
    <div class="mixingfont"><h2>小米明星单品</h2><span class="qian">&lt;</span><span class="hou">&gt;</span></div>
    
  <div class="mixing-parent">
    <ul class="mixingpicture"><li class="mixingpicture-first">
    <a href="#"><img src="./img/xingpin1.png" alt=""></a><p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-second"><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-three"><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-four"><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-five"><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
     <div class="clear"></div></ul>
    <ul>
    <li class="mixingpicture-first">
    <a href="#"><img src="./img/xingpin4.png" alt=""></a><p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-second"><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-three"><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-four"><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li class="mixingpicture-five"><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p class="jiadiantop">小米MINX</p>
    <p class="jiadiantop2">6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <div class="clear"></div>
    </ul>
    </div>
    </div>
   
    </div>
    <!--家电-->
    <main>
        <div class="container container-main">
           <div class="jiadianfont">
             <div class="h2">家电</div>
             <div class="point"><span class="point-span">热门</span>
            <span>电视影音</span>
            <span>电脑</span>
            <span>家居</span></div>
           </div>
        <div class="main-jiadian">
        <ul class="main-jiadian1"><li><img src="./img/jiadian.jpg" alt=""></li></ul>
        <div class="huantu">
             <ul class="main-jiadian2">
      <li>
      <a href="#"><img src="./img/xingpin1.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin2.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin1.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin1.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin2.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
        </div>
            </div>



              <div class="jiadianfont">
             <div class="h2">智能</div>
             <div class="pointtwo"><span class="point-span">热门</span>
            <span>出行</span>
            <span>健康</span>
            <span>酷玩</span></div>
           </div>
        <div class="main-jiadian">
        <ul class="main-jiadianOne"><li><img src="./img/jiadian5.jpg" alt=""></li><li><img src="./img/jiadian6.jpg" alt=""></li></ul>
        <div class="huantutwo">
             <ul class="main-jiadian2">
      <li>
      <a href="#"><img src="./img/xingpin1.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin2.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin1.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin1.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin1.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin2.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
              <ul>
      <li>
      <a href="#"><img src="./img/xingpin2.png" alt=""></a><p class="jiadiantop">小米MINX</p>
      <p>6.4''全面屏 全陶瓷机身</p>
      <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p><span class="xinpin">新品</span></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
    <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
    <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><span class="xinpinred">新品</span></li>
    <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p><p class="yellow">小米好
      小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好小米好
      </p></li>
      <li><a href="#"><img src="./img/xingpin4.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p>
    </li>
      <li><a href="#"><img src="./img/xingpin3.png" alt=""></a>
    <p>小米MINX</p>
    <p>6.4''全面屏 全陶瓷机身</p>
    <p class="jiadiantop3">3499元</p></li>
      <div class="main-jiadianfive"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div>
      <div class="vr"><div class="vr"><span>小米vr眼镜</span><span class="jiadiantopthree">3499元</span><img src="./img/vr.jpg" alt=""></div></div>
    <div class="clear"></div>
              </ul>
        </div>
    
            </div> 
             
              <!--为您推荐*******************************************************-->
             <div class="advance">
             <div class=" mixingfont mixingfont-tuijian"><div class="h2">为您推荐</div><span class="qiantop">&lt;</span><span class="houtop">&gt;</span></div>
             
               <div class="container container-foryou">
              <div class="foryou">
                 <ul><li><img src="./img/xingpin2.png" alt="">
                 <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin1.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin3.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                  <li><img src="./img/xingpin4.png" alt="">
                   <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin3.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 </ul>

                  <ul><li><img src="./img/xingpin4.png" alt="">
                   <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin3.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin4.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                  <li><img src="./img/xingpin1.png" alt="">
                   <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin4.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li></ul>
                 
                  <ul><li><img src="./img/xingpin2.png" alt="">
                   <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin4.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin1.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                  <li><img src="./img/xingpin4.png" alt="">
                   <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li>
                 <li><img src="./img/xingpin3.png" alt="">
                  <p>小米电视3s 65英寸 影院版</p>
                 <p class="jiadiantop3">6499元</p></li></ul>
                 <div class="clear"></div>
             </div>
        </div>
             </div>
             
        <!--内容**********************************************************************-->
          <div class="container-content">
              <div class="h2">内容</div>
               </div>
             
              <div class="picture">
                  <div class="content">
                  <ul>
                   <li>
                   <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p>
                   <img src="./img/book.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book2.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book3.png" alt=""></li>
                   <!--<div class="clear"></div>-->
                  </ul> 
                  <div class="quan">
                      <span class="active"></span>
                      <span></span>
                      <span></span>
                  </div>
            <div class="imgspan">
               <span class="prev-click">&lt;</span>
               <span class="next-click">&gt;</span>
        </div>
         </div>
   
                  <div class="content-second">
                  <ul>
                   <li>
                   <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p>
                   <img src="./img/book.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book2.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book3.png" alt=""></li>
                   <!--<div class="clear"></div>-->
                  </ul> 
                  <div class="quan quan-first">
                      <span class="active-first"></span>
                      <span></span>
                      <span></span>
                  </div>
            <div class="imgspan imgspan-first">
               <span class="prev-click-first">&lt;</span>
               <span class="next-click-first">&gt;</span>
        </div>
         </div>
         
                  <div class="content-third">
                  <ul>
                   <li>
                   <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p>
                   <img src="./img/book.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book2.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book3.png" alt=""></li>
                   <!--<div class="clear"></div>-->
                  </ul> 
                  <div class="quan quan-second">
                      <span class="active-second"></span>
                      <span></span>
                      <span></span>
                  </div>
            <div class="imgspan imgspan-second">
               <span class="prev-click-second">&lt;</span>
               <span class="next-click-second">&gt;</span>
        </div>
         </div>
   
      
                  <div class="content-four">
                  <ul >
                   <li>
                   <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p>
                   <img src="./img/book.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book2.png" alt=""></li>

                   <li> <p class="jiadiantop3 book">图书</p>
                   <p>哈利·波特与被诅咒的孩子</p>
                   <p class="gray">哈利波特第八个故事中文版震撼来袭来<br>
                   袭！特别彩排版剧本</p>
                   <p>29.37元</p><img src="./img/book3.png" alt=""></li>
                   <!--<div class="clear"></div>-->
                  </ul> 
                  <div class="quan quan-third">
                      <span class="active-third"></span>
                      <span></span>
                      <span></span>
                  </div>
            <div class="imgspan imgspan-third">
               <span class="prev-click-third">&lt;</span>
               <span class="next-click-third">&gt;</span>
        </div>
         </div>
           </div>  

         <!--视屏*********************************************-->
         <div class="container container-vediofont">
              <div class="h2">视频</div>
              <div class="all"><span class="seeall">查看全部</span><span class="right-vedio">&gt;</span></div>
                                                                                                                                                                                     </div>
    <div class="container container-vedio">
        <ul>
           <li onclick="showClick()"><img src="./img/vedio1.jpg" alt=""><p>听雷总讲小米7年工艺探索之路</p><p class="hui">小米6，7年公益探索的巅峰之作</p>
           <span class="bofang"><i class="fa fa-caret-right" aria-hidden="true" id="chaoyou"></i></span></li>
           <li onclick="showClick()"><img src="./img/vedio2.jpg" alt=""><p>听雷总讲小米7年工艺探索之路</p><p class="hui">小米6，7年公益探索的巅峰之作</p>
           <span class="bofang" ><i class="fa fa-caret-right" aria-hidden="true" id="chaoyou"></i></span></li>
           <li onclick="showClick()"><img src="./img/vedio3.jpg" alt=""><p>听雷总讲小米7年工艺探索之路</p><p class="hui">小米6，7年公益探索的巅峰之作</p>
           <span class="bofang"><i class="fa fa-caret-right" aria-hidden="true" id="chaoyou"></i></span></li>
           <li onclick="showClick()"><img src="./img/vedio4.jpg" alt=""><p>听雷总讲小米7年工艺探索之路</p><p class="hui">小米6，7年公益探索的巅峰之作</p>
           <span class="bofang"><i class="fa fa-caret-right" aria-hidden="true" id="chaoyou"></i></span></li> 
        </ul>

    </div>  
    
    </main>
    <div class="box">
        <div class="baitiao"><span class="close" onclick="closeClick()">&times;</span></div> <img src="./img/vedio3.jpg" alt="">
         <span class="tanchubofang"><i class="fa fa-caret-right" aria-hidden="true" id="chaoyou"></i></span></li></div> 
  <div class="overlay"></div>
    <!--结尾***********************************************************************-->
    <footer>
        <div class="container container-footer">
            <ul>
                <li><a href="#"><i class="fa fa-wrench" aria-hidden="true" id="xiuli"></i>预约维修服务</a></li>
                <li><a href="#"><i class="fa fa-wrench" aria-hidden="true" id="xiuli"></i>预约维修服务</a></li>
                <li><a href="#"><i class="fa fa-wrench" aria-hidden="true" id="xiuli"></i>预约维修服务</a></li>
                <li><a href="#"><i class="fa fa-wrench" aria-hidden="true" id="xiuli"></i>预约维修服务</a></li>
                <li class="noborder"><a href="#"><i class="fa fa-wrench" aria-hidden="true" id="xiuli"></i>预约维修服务</a></li>
            </ul>
        </div>
            <div class="container lastfooter">
                <ul>
                    <li class="ul-one"><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">账户管理</a></li>
                </ul>
                <ul>
                    <li class="ul-one"><a href="#">服务支持</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">账户管理</a></li>
                </ul>
                <ul>
                    <li class="ul-one"><a href="#">关于小米</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">账户管理</a></li>
                </ul>
                <ul>
                    <li class="ul-one"><a href="#">线下门店</a></li>
                    <li><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                </ul>
                <ul>
                    <li class="ul-one"><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                </ul>
                <ul>
                    <li class="ul-one"><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                    <li><a href="#">关于小米</a></li>
                </ul>
                <ul class="last">
                    <li class="phonenumber">400-100-5678</li>
                    <li class="black">周一至周日8：00-18：00</li>
                    <li class="huafei">(仅收市话费)</li>
                    <li class="orangeborder"><i class="fa fa-hand-o-right" aria-hidden="true"></i>24小时在线客服</li>
                </ul>
        </div>
    </footer>
    <div class="last-logo">
    <div class="container logo">
        <div class="orangelogo"><img src="./img/mi-logo.png" alt=""></div>
          <div class="left-logo">
                <a href="#">小米商城</a><span class="sep">|</span>
                <a href="#">MIUI</a><span class="sep">|</span>
                <a href="#">米聊</a><span class="sep">|</span>
                <a href="#">游戏</a><span class="sep">|</span>
                <a href="#">多看阅读</a><span class="sep">|</span>
                <a href="#">云服务</a><span class="sep">|</span>
                <a href="#">金融</a><span class="sep">|</span>
                 <a href="#">云服务</a><span class="sep">|</span>
                <a href="#">金融</a><span class="sep">|</span>
                <a href="#">小米商城手机版</a><span class="sep">|</span>
                <a href="#">问题反馈</a><span class="sep">|</span>
                <a href="#">SelectRegion</a>
                <p><a href="#">©mi.com 京ICP证110507号 
                    京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 
                    </a></p>
                    <p><a href="#">违法和不良信息举报电话：185-0130-1238，本网站所列数据，
                        除特殊说明，所有数据均出自我司实验室测试</a></p>
            </div>
            <div class="logo-img">
            <img src="./img/v-logo-4.png" alt="">
            <img src="./img/v-logo-2.png" alt="">
            <img src="./img/v-logo-3.png" alt="">
            <img src="./img/v-logo-1.png" alt=""></div>
       
    </div>
    </div>
    <script src="jquery.js"></script>
</body>

</html>
<script>
    $('.car').hover(function () {
        $('.noshopping').slideDown(200)
    }, function () {
        $('.noshopping').slideUp(200);
        if ($('.noshopping').slideUp().val() == 0) {
            $('.topcar').css('background-color', 'transparent');
        }
    })
    // 第二部分导航的js
    var index = 0;
        $('.second-nav li').mouseenter(function () {
            if($('.second-nav li').index()<7){
                $('.topborder').stop().slideDown();
            }else{
                $('.topborder').stop().slideUp();
            }
            $('.container-border').eq($(this).index()).show().siblings().hide()
        })
        	$('.second-nav').mouseleave(function(){
		$('.topborder').stop().slideUp(200);
	});
	$('.topborder').hover(function(){
		$(this).stop().slideDown(200);
	},function(){
		$(this).stop().slideUp(200);
	});

    $('.inputinfo').click(function (ev) {
        ev.stopPropagation()
        $(this).css('border-color', '#FF6700')
        $('.inputbtn').css('border-color', '#FF6700')
        $('.first-miA').hide();
        $('.second-miB').hide();
        $('.kuang').show()
    })
    $('body').click(function () {
        $('.inputinfo').css('border-color', '#eee')
        $('.inputbtn').css('border-color', '#eee')
        $('.first-miA').show();
        $('.second-miB').show();
        $('.kuang').hide()
    })
    //轮播图js
    var timer = setInterval(nextImg, 1000);
    var index = 0
    function prevImg() {
        index = index == 0 ? $('.lunbo li').length : index - 1;
        showImg()
    }
    function nextImg() {
        index = index == $('.lunbo li').length ? 0 : index + 1;
        showImg()
    }

    
    function showImg() {
        $('.lunbo li').eq(index).addClass('current')
            .siblings().removeClass('current');
        $('.light span').eq(index).addClass('green')
            .siblings().removeClass('green');
        
    }
    $('.container-lunbo').hover(function () {
        clearInterval(timer);
        timer = null;
        $('.img-click span').css('background-color', '#333');
    }, function () {
        timer = setInterval(nextImg, 1000);
        $('.img-click span').css('background-color', 'transparent');

    })
    $('.light span').click(function () {
        index = $(this).index();
        showImg();
    })
    $('.next').click(function () {
        nextImg()
    })
    $('.prev').click(function () {
        prevImg()
    })
    //轮播图左边框
    $('.lunbokuang li').hover(function(){
        $('.lunbokuang li').eq($(this).index()).css('background-color','#FF6700')
     $('.nearlunbo ul').eq($(this).index()).show().siblings().hide()
    },function(){
         $('.lunbokuang li').css('background-color','transparent')
         $('.nearlunbo ul').hide()
    })

    $('.lunbokuang').mouseleave(function(){
     $('.nearlunbo ul').eq($(this).index()).hide()
    })
    $('.nearlunbo ul').hover(function(){
        $('.lunbokuang li').eq($(this).index()).css('background-color','#FF6700')
        .siblings().css('background-color','transparent')
        $('.nearlunbo ul').eq($(this).index()).show().siblings().hide()
    },function(){
                $('.lunbokuang li').css('background-color','transparent')
          $('.nearlunbo ul').hide()
    })
    //小米星品
    var left=0;  
    // timer=setInterval(houImg,1000)
    function show(){
        if(left==0){
            left=-1226
        }else{
            left=0
        }
        changeImg()
    }
    function qianImg(){
        left=0;
        changeImg()
    }
     function houImg(){
        left=-1226;
        changeImg()
    }
    var timer3=setInterval(show,3000)
    function changeImg(){
        $('.mixing-parent').animate({left:(left+'px')},500)
    }
    $('.qian').click(function(){
        qianImg()
    })
      $('.hou').click(function(){
        houImg()
    })
    //为你推荐
     var tu=0;
    function firstImg(){
        tu=tu==0 ? 0:tu - 1;  
        tuijianImg()
    }
     function secondImg(){
        tu=tu==2 ? 2:tu + 1;  
        tuijianImg()
    }
    function tuijianImg(){
        $('.foryou').animate({left:-1226*tu})
    }
   
    $('.qiantop').click(function(){
        firstImg()

    })
      $('.houtop').click(function(){
        secondImg()

    })
   
    //家电js
    $('.point span').hover(function(){
        $(this).addClass('point-span').siblings().removeClass('point-span')
        $('.huantu ul').eq($(this).index()).addClass('main-jiadian2').siblings().removeClass('main-jiadian2') 
    })
    
    $('.pointtwo span').hover(function(){
        $(this).addClass('point-span').siblings().removeClass('point-span')
        $('.huantutwo ul').eq($(this).index()).addClass('main-jiadian2').siblings().removeClass('main-jiadian2') 
    })
    //轮播
    var isBegin;
    $('.content').hover(function(){
        if(isBegin){
         $(this).find('.imgspan span').fadeTo(500,0)
        }else{
           $(this).find('.imgspan span').fadeTo(500,0.5)
        } 
        isBegin=!isBegin;
    })
        var isBegin;
    $('.content-second').hover(function(){
        if(isBegin){
         $(this).find('.imgspan-first span').fadeTo(500,0)
        }else{
           $(this).find('.imgspan-first span').fadeTo(500,0.5)
        } 
        isBegin=!isBegin;
    })
        var isBegin;
    $('.content-third').hover(function(){
        if(isBegin){
         $(this).find('.imgspan-second span').fadeTo(500,0)
        }else{
           $(this).find('.imgspan-second span').fadeTo(500,0.5)
        } 
        isBegin=!isBegin;
    })
        var isBegin;
    $('.content-four').hover(function(){
        if(isBegin){
         $(this).find('.imgspan-third span').fadeTo(500,0)
        }else{
           $(this).find('.imgspan-third span').fadeTo(500,0.5)
        } 
        isBegin=!isBegin;
    })
//第一个
    var test=0;
    function shangImg(){
        test=test==0 ? 0:test - 1;  
        contentImg()
    }
     function xiaImg(){
        test=test==2 ? 2:test + 1;  
        contentImg()
    }
    function contentImg(){
        $('.content ul').stop().animate({left:-296*test})
        $('.quan span').eq(test).addClass('active').siblings().removeClass('active'); 
    }
      
       $('.quan span').click(function(){
          test=$(this).index();
          contentImg()
       })

   
    $('.prev-click').click(function(){
        shangImg()

    })
      $('.next-click').click(function(){
        xiaImg()

    })
    //第二个
     var test2=0;
    function shang1Img(){
        test2=test2==0 ? 0:test2 - 1;  
        content1Img()
    }
     function xia1Img(){
        test2=test2==2 ? 2:test2 + 1;  
        content1Img()
    }
    function content1Img(){
        $('.content-second  ul').stop().animate({left:-296*test2})
        $('.quan-first span').eq(test2).addClass('active-first').siblings().removeClass('active-first'); 
    }
      
       $('.quan-first span').click(function(){
          test2=$(this).index();
          content1Img()
       })

   
    $('.prev-click-first').click(function(){
        shang1Img()

    })
      $('.next-click-first').click(function(){
        xia1Img()

    })
    //第三个
    var test1=0;
    function shang2Img(){
        test1=test1==0 ? 0:test1 - 1;  
        content2Img()
    }
     function xia2Img(){
        test1=test1==2 ? 2:test1 + 1;  
        content2Img()
    }
    function content2Img(){
        $('.content-third  ul').stop().animate({left:-296*test1})
        $('.quan-second span').eq(test1).addClass('active-second').siblings().removeClass('active-second'); 
    }
      
       $('.quan-second span').click(function(){
          test1=$(this).index();
          content2Img()
       })

   
    $('.prev-click-second').click(function(){
        shang2Img()

    })
      $('.next-click-second').click(function(){
        xia2Img()

    })
    //第四个
    var test3=0;
    function shang3Img(){
        test3=test3==0 ? 0:test3 - 1;  
        content3Img()
    }
     function xia3Img(){
        test3=test3==2 ? 2:test3 + 1;  
        content3Img()
    }
    function content3Img(){
        $('.content-four  ul').stop().animate({left:-296*test3})
        $('.quan-third span').eq(test3).addClass('active-third').siblings().removeClass('active-third'); 
    }
      
       $('.quan-third span').click(function(){
          test3=$(this).index();
          content3Img()
       })

   
    $('.prev-click-third').click(function(){
        shang3Img()

    })
      $('.next-click-third').click(function(){
        xia3Img()

    })
    //点击出现弹框
     var overlay = document.querySelector('.overlay');
    function showClick(){
             overlay.style.display = 'block';
        $('.box').show().animate({top:170},200)
    }
     function closeClick(){
             overlay.style.display = 'none';
         $('.box').animate({top:-600},200)

    }
    

  
        
    

   

</script>